<template>
  <!-- <div class="content" :class="animate"> -->
  <router-view v-slot="{ Component }">
    <Transition mode="out-in" name="router_animate">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </Transition>
  </router-view>

  <!-- </div> -->
  <LoadMask />
</template>

<script setup lang='ts'>
import { ref, watch, computed, onMounted } from "vue"
import { RouterView, useRouter } from 'vue-router'
import LoadMask from "@/components/common/loadMask.vue";
// import AnimateClass from '@/extra/animateClass'


let router = useRouter()

// const random = ref(0)
// const aLength = AnimateClass.length
// const animate = computed(() => {
//   return AnimateClass[random.value]
// })

// watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
//   random.value = Math.floor(Math.random() * aLength + 1) - 1
// }, { immediate: true })

</script>

<style lang="scss" scoped>

.router_animate-enter-active {
  animation: flipInY 0.5s;
}

.router_animate-leave-active {
  animation: flipOutY 0.5s;
}

.content {
  height: 100%;
  overflow: hidden;
  margin: 10px 20px;
  width: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);

  >div:last-child {
    height: 100%;
    overflow: hidden;
    width: 100%;
  }
}
</style>
